<template>
    <div id="search">
        <input type="text" class="search-input " @keyup.enter="search" v-model="value">
        <button class="search-btn " @click="search">
           <img src="../../common/imgs/search2.svg" alt="" class="search-icon">
           <span class="txt">搜索</span>           
        </button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            value:'',
        }
        
    },
    methods:{
        search(){
            if(!this.value){
                return
            }
            console.log(this.value);
            this.value='';

        }
    }
    
}
</script>
<style lang="scss">
#search{
    font-family:'Microsoft YaHei';
    font-size: 0;
    .search-input{
        width: 758px;
        height: 50px;
        vertical-align: top;
        box-sizing: border-box;
        padding: 10px;
        // font-size: 16px;
        border:2px solid #97cb46;
        border-right: none;
        font-size: 16px;
    }
    .search-btn{
        width: 100px;
        height: 50px;
        vertical-align: top;
        font-size: 24px;
        font-weight: normal;
        background-color: #84c224;
        color:#fffafa;
        font-weight: 400;
        cursor: pointer;
        .search-icon{
            width: 28px;
            vertical-align:top;
        }
        .txt{
            vertical-align: top;
        }

    }

}

</style>


